import Roact from '@rbxts/roact';
import BaseComponent from 'shared/component/dlt-view/BaseComponent';
import { CSS } from 'shared/component/dlt-view/CssCommon';
import Mouter from 'shared/component/dlt-view/Mouter';
import EventBinder from 'shared/component/event/EventBinder';
export interface PcActPanelProps {
    name?: StringValue
    mounter?: Mouter
    buttons?: Ctn.controller.ActButtonEntity[];
    actButtonEventBinder: EventBinder<(actButtonState: Ctn.controller.ActButtonStatesEntity) => void>
}
export class PcActPanel extends Roact.Component<PcActPanelProps> {
    binder = new BaseComponent<PcActPanelProps>()
    protected willUnmount(): void {
        this.binder.willUnmount();
    }
    didMount() {
        this.binder = new BaseComponent<PcActPanelProps>()
        this.binder.bind(['name'], this.props, () => this.setState(this.props));
    }
    public render(): Roact.Element | undefined {
        const children = new Array<Roact.Element>();
        this.props[Roact.Children]?.forEach(c => {
            children.push(c)
        })
        const t = new CSS(undefined, undefined, ['PcActPanel']);
        const s = (name: string) => t.cssEx(name);
        const r = <Roact.Fragment>
            <frame {...s('root')} Key={'root'}>
                <frame {...s('pc')} Key={'pc'}>
                    <uigridlayout {...s('UIGridLayout')} Key={'UIGridLayout'}>
                    </uigridlayout>
                    {this.props.buttons?.map(button => {
                        let keyName: string = button.key.Name
                        if (button.key === Enum.KeyCode.LeftShift || button.key === Enum.KeyCode.RightShift) {
                            keyName = 'Shift'
                        }
                        if (button.inputType === Enum.UserInputType.MouseButton1) {
                            keyName = "🖱️LB"
                        } else if (button.inputType === Enum.UserInputType.MouseButton2) {
                            keyName = "🖱️RB"
                        }
                        const ContextActionService = game.GetService('ContextActionService');
                        ContextActionService.UnbindAction(button.inputType.Name + button.key || '')
                        ContextActionService.BindAction(
                            button.inputType.Name + button.key || '',
                            (actionName: string, state: Enum.UserInputState, inputObject: InputObject) => {

                                if (button.key && button.key !== inputObject.KeyCode) {
                                    return
                                }
                                if (state === Enum.UserInputState.Begin) {
                                    this.props.actButtonEventBinder.callBack({
                                        act: button.act,
                                        press: true,
                                    })
                                }
                                if (state === Enum.UserInputState.End) {
                                    this.props.actButtonEventBinder.callBack({
                                        act: button.act,
                                        press: false,
                                    })
                                }
                            },
                            false, button.key || button.inputType)
                        return <Roact.Fragment>
                            <frame {...s('grid')} Key={'grid'}>
                                <uipadding {...s('UIPadding')} Key={'UIPadding'}>
                                </uipadding>
                                <imagebutton {...s('skillButton')} Key={'skillButton'} Event={{
                                    InputChanged: (rbx: ImageButton, input: InputObject) => {
                                        this.props.actButtonEventBinder.callBack({
                                            act: button.act,
                                            press: true,
                                        })

                                    },
                                    InputBegan: (rbx: ImageButton, input: InputObject) => {
                                        this.props.actButtonEventBinder.callBack({
                                            act: button.act,
                                            press: true,
                                        })
                                    },
                                    InputEnded: (rbx: ImageButton, input: InputObject) => {
                                        this.props.actButtonEventBinder.callBack({
                                            act: button.act,
                                            press: false,
                                        })
                                    }
                                }}>
                                    <uistroke {...s('UIStroke')} Key={'UIStroke'}>
                                    </uistroke>
                                    <uicorner {...s('UICorner')} Key={'UICorner'}>
                                    </uicorner>
                                    <textlabel {...s('keyname')} Key={'keyname'} Text={keyName}>
                                        <uipadding {...s('UIPadding')} Key={'UIPadding'}>
                                        </uipadding>
                                    </textlabel>
                                    <frame {...s('mask')} Key={'mask'}>
                                        <uigradient {...s('UIGradient')} Key={'UIGradient'}>
                                        </uigradient>
                                        <uicorner {...s('UICorner')} Key={'UICorner'}>
                                        </uicorner>
                                    </frame>
                                </imagebutton>
                            </frame>
                        </Roact.Fragment>
                    })}

                </frame>
            </frame>

        </Roact.Fragment>;
        return r
    }

}